<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="test"></div>
    <a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
        <img src="../../asset/github.png" alt="" />
    </a>
    <!--[if lt IE 9]><script type="text/javascript" crossorigin="anonymous" src="//s.url.cn/qqun/xiaoqu/buluo/p/js/es5-sham-es5-sham.min.77c4325f.js"></script><![endif]-->
    <script src="../../dist/omi.js"></script>
    <script>

        var Todo =  Omi.create("Todo",{
            install:function(){
                this.data = this.$store.data
                this.$store.addView(this);
            },
            add :function(evt) {
                evt.preventDefault();
                var text = this.data.text;
                this.data.text = '';
                this.$store.add(text);
            },
            changeHandler:function(evt){
                this.data.text = evt.target.value
            },
            style:function () {
                return 'h3 { color:red; }\
                button{ color:green;}';
            },
            render:function(){
                return '<div>\
                            <h3>TODO</h3>\
                            <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\
                            <form onsubmit="add(event)" >\
                                    <input onchange="changeHandler" type="text" value="{{text}}" />\
                                    <button>Add #{{items.length}}</button>\
                            </form>\
                    </div>';
            }
        })

        var store = Omi.createStore({
            data: {
                items: ['abc', 'def', 'ghi']
            },
            methods: {
                add: function (value) {
                    this.data.items.push(value);
                    this.update();
                },
                clear: function () {
                    this.data.items.length = 0;
                }
            }
        })



        Omi.render(new Todo(),'#test',{
            store:store
        });
    </script>
</body>
</html>